<html>
<head>
<title>ChromeFAQs - Options</title>
<style>
body {
	font-family: helvetica, arial, sans-serif;
	font-size: 80%;
	margin: 10px;
}

#header {
	padding-bottom: 1.5em;
	padding-top: 1.5em;
}

#header h1 {
	font-size: 156%;
	display: inline;
	padding-bottom: 43px;
	padding-left: 75px;
	padding-top: 40px;
	background: url(icon_128.png) no-repeat;
	background-size: 67px;
	background-position: 1px 18px;
}

.section-header {
	background: #ebeff9;
	border-top: 1px solid #b5c7de;
	font-size: 99%;
	padding: 3px 0 2px 5px;
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 4em;
}

.section-header.first {
	margin-top: 1em;
}

#signature {
	width: 300px;
	margin-left: 2px;
}

#footer {
	margin-top: 4em;
}
</style>
</head>
<body>

<div id="header">
	<h1>ChromeFAQs Options</h1>
</div>

<div class="section-header first">Signature</div>
<p>Enter here the signature used with quickpost.</p>
<p>
	<textarea id="signature" oninput="mark_dirty()"></textarea>
</p>
<p><em>Remeber to keep it under 200 chars and 2 lines.</em></p>

<div class="section-header">Post New Message link behavior</div>
<p>Select here the desired behaviour for when you click on the Post New Message link.</p>
<p>
	<select id="post-link-behavior" onchange="mark_dirty()">
		<option value="quickpost">Take to quickpost form</option>
		<option value="default">Default</option>
	</select>
</p>

<div class="section-header">Create New Topic link behavior</div>
<p>Select here the desired behaviour for when you click on the Create New Topic link.</p>
<p>
	<select id="create-topic-behavior" onchange="mark_dirty()">
		<option value="quicktopic">Popup create topic form</option>
		<option value="default">Default</option>
	</select>
</p>

<div class="section-header">Use keyboard shortcuts</div>
<p>
	<input id="use-keyboard-shortcuts" type="checkbox" onchange="mark_dirty()" />
	<label for="use-keyboard-shortcuts">
		Check if you would like to use keyboard shortcuts in GameFAQs
	</label>
</p>
<p>
	<b>Shortcuts:</b>
	<ul>
		<li>
			Inside a topic
			<ul>
				<li>
					<b>ctrl+alt+p:</b>
					Put focus on quickpost form, if focus is already on quickpost form posts the message with no preview.
				</li>
				<li>
					<b>ctrl+alt+r:</b>
					When focus on quickpost form, go to message preview.
				</li>
				<li>
					<b>ctrl+alt+s:</b>
					When focus on quickpost form, go to message preview and spellcheck.
				</li>
				<li>
					<b>ctrl+alt+e:</b>
					When focus on quickpost form, reset message.
				</li>
				<li>
					<b>ctrl+alt+b</b>
					When focus on quickpost form, insert or wrap with a bold tag.
				</li>
				<li>
					<b>ctrl+alt+i</b>
					When focus on quickpost form, insert or wrap with an italics tag.
				</li>
			</ul>
		</li>
		
		<li>
			In topic list
			<ul>
				<li>
					<b>ctrl+alt+p:</b>
					Put focus on quickpost form, if focus is already on quickpost form posts the message with no preview.
				</li>
				<li>
					<b>ctrl+alt+r:</b>
					When focus on quickpost form, go to message preview.
				</li>
				<li>
					<b>ctrl+alt+s:</b>
					When focus on quickpost form, go to message preview and spellcheck.
				</li>
				<li>
					<b>ctrl+alt+e:</b>
					When focus on quickpost form, reset message.
				</li>
				<li>
					<b>ctrl+alt+b</b>
					When focus on quickpost form, insert or wrap with a bold tag.
				</li>
				<li>
					<b>ctrl+alt+i</b>
					When focus on quickpost form, insert or wrap with an italics tag.
				</li>
			</ul>
		</li>
		
	</ul>
</p>

<div id="footer">
	<button id="save-button" style="font-weight:bold" onclick="save()">Save</button>
	<button onclick="init()">Cancel</button>
</div>

<script>
var settings;
var signature_textbox;
var post_link_behavior_select;
var create_topic_link_behavior_select;
var use_keyboard_shortcuts_checkbox;
var save_button;

init();

function load_select(select, setting) {
	for (var i = 0; i < select.children.length; i++) {
		var child = select.children[i];
		if (child.value == setting) {
			child.selected = "true";
			break;
		}
	}
} 

function init() {
	settings = JSON.parse(localStorage.cfaqs || "{}");
	
	signature_textbox = document.getElementById("signature");
	post_link_behavior_select = document.getElementById("post-link-behavior");
	create_topic_behavior_select = document.getElementById("create-topic-behavior");
	use_keyboard_shortcuts_checkbox = document.getElementById("use-keyboard-shortcuts");
	save_button = document.getElementById("save-button");
	
	signature_textbox.innerText = settings.signature || "";
	
	use_keyboard_shortcuts_checkbox.checked = settings.use_keyboard_shortcuts;
	
	load_select(post_link_behavior_select, settings.post_link_behavior);
	load_select(create_topic_behavior_select, settings.create_topic_behavior);

	mark_clean();
}

function save() {
	settings.signature = signature_textbox.value;
	settings.use_keyboard_shortcuts = use_keyboard_shortcuts_checkbox.checked;
	
	settings.post_link_behavior =
		post_link_behavior_select.children[post_link_behavior_select.selectedIndex].value;
	
	settings.create_topic_behavior =
		create_topic_behavior_select.children[create_topic_behavior_select.selectedIndex].value;
	
	localStorage.cfaqs = JSON.stringify(settings);
	mark_clean();
}

function mark_dirty() {
	save_button.disabled = false;
}

function mark_clean() {
	save_button.disabled = true;
}
</script>
</body>
</html>